<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <title>Audio Network - data transmission over sound waves</title>

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="../../asset/css/simple-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../asset/css/example.css">
    <link rel="stylesheet" type="text/css" href="../00-00-00-common/ui/editable-float.css">
    <link rel="stylesheet" type="text/css" href="../00-00-00-common/ui/spectrogram.css">
    <link rel="stylesheet" type="text/css" href="spectral-waterfall.css">
    <script src="../../asset/js/site.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onLoad="init()">

    <div id="fb-root"></div>
    <script>
        if (isProduction()) { // TODO refactor this
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=726972757440597";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        }
    </script>

    <div class="wrapper">

        <div class="container">
            <h1>Audio Network - send data over sound in JavaScript</h1>
            <div class="row margin-bottom">
                <div class="col col-xs-12">
                    <div class="fb-like-cont">
                        <a href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" target="_blank" class="a-icon a-icon-fb">
                            <img src="/asset/image/fb.png" alt="Audio Network at Facebook">
                        </a>
                        <div class="fb-like" data-href="https://www.facebook.com/Data-transmission-over-sound-500422050157351/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
                    </div>
                    <p class="text-right">
                        Return to <a href="https://audio-network.rypula.pl">main page</a>
                    </p>
                    <p class="larger text-center">
                        THIS PROJECT IS STILL UNDER DEVELOPMENT<br/>
                        Source code available at <a href="https://github.com/robertrypula/AudioNetwork" target="_blank">GitHub</a>
                    </p>
                </div>
            </div>

            <!-- ---------------- -->

            <div class="row margin-bottom">
                <div class="col col-xs-12">

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label for="loopback-checkbox" class="label-compact">
                                Loopback
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <input
                                type="checkbox"
                                onChange="onLoopbackCheckboxChange()"
                                id="loopback-checkbox"
                                value="1" />
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-4 col-sm-5 col-md-3">
                            <label>
                                FFT Size exponent
                            </label>
                        </div>
                        <div class="col col-xs-8 col-sm-7 col-md-9">
                            <div id="fft-size-exponent" class="clearfix"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-4 col-sm-5 col-md-3">
                            <label>
                                FFT skip factor
                            </label>
                        </div>
                        <div class="col col-xs-8 col-sm-7 col-md-9">
                            <div id="fft-frequency-bin-skip-factor" class="clearfix"></div>
                        </div>
                    </div>


                    <div class="row margin-bottom-double">
                        <div class="col col-xs-4 col-sm-5 col-md-3">
                            <label>
                                Quick View
                            </label>
                        </div>
                        <div class="col col-xs-8 col-sm-7 col-md-9">
                            <button class="btn btn-default" onClick="onQuickViewClick('full')">Full range</button>
                            <button class="btn btn-default" onClick="onQuickViewClick('whistling')">Whistling range</button>
                            <button class="btn btn-default" onClick="onQuickViewClick('physical-layer')">Physical Layer range</button>
                        </div>
                    </div>


                    <h2>Receiver</h2>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-4 col-sm-5 col-md-3">
                            <label>
                                Sample&nbsp;rate
                            </label>
                        </div>
                        <div class="col col-xs-8 col-sm-7 col-md-9">
                            <div class="label-box">
                                <span>
                                    <span id="rx-sample-rate">-</span> Hz
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-4 col-sm-5 col-md-3">
                            <label class="label-compact">
                                DSP details
                            </label>
                        </div>
                        <div class="col col-xs-8 col-sm-7 col-md-9">
                            <div id="rx-dsp-detail" class="log-container"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label>
                                Frequency range [Hz]
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <div id="rx-frequency-min" class="margin-bottom clearfix"></div>
                            <div id="rx-frequency-max" class="margin-bottom clearfix"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3"></div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <div id="rx-log" class="log-container"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label class="label-compact">
                                Symbol RAW
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <div id="rx-symbol" class="margin-bottom"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-12">
                            <div id="rx-spectrogram"></div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label for="rx-active" class="label-compact">
                                Spectrogram
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <input
                                type="checkbox"
                                id="rx-active"
                                checked="checked"
                                value="1" />
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label for="loudest-marker" class="label-compact">
                                Show loudest
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <input
                                type="checkbox"
                                id="loudest-marker"
                                checked="checked"
                                value="1" />
                        </div>
                    </div>

                    <!-- ----- -->

                    <h2>Transmitter</h2>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label class="label-compact">
                                Sample rate
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <div id="tx-sample-rate" class="margin-bottom clearfix"></div>
                            <p>
                                This value should match sample rate that is displayed on the receiver's side.
                                The problem is that we cannot fine-tune receiver because in Web Audio API sample
                                rate is fixed and depends on device. The solution is to tune the transmitter
                                to match frequency bins that receiver is looking for.
                            </p>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label>
                                TX symbol
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <div id="tx-symbol" class="margin-bottom clearfix"></div>
                            <div class="clearfix">
                                <span>Frequency: </span>
                                <span id="tx-symbol-frequency"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row margin-bottom-double">
                        <div class="col col-xs-5 col-sm-5 col-md-3">
                            <label for="tx-play" class="label-compact">
                                Play
                            </label>
                        </div>
                        <div class="col col-xs-7 col-sm-7 col-md-9">
                            <input
                                type="checkbox"
                                id="tx-play"
                                onChange="onTxPlayChange()"
                            />
                        </div>
                    </div>

                </div>
            </div>

            <!-- ---------------- -->

            <script>
                if (isProduction()) { // TODO refactor this
                    document.write('<div class="fb-comments" data-href="' + window.location.href + '" data-numposts="5"></div>');
                }
            </script>

        </div>

        <footer>
            <div class="row">
                <div class="col col-xs-12">
                    <div class="copyright">Robert Rypuła 2015-2018</div>
                </div>
            </div>
        </footer>

    </div>

    <script src="https://cdn.rypula.pl/audio-network/v1.3.2/audio-network-v1.3.2.min.js"></script>

    <script src="../00-00-00-common/ui/dom-util.js"></script>
    <script src="../00-00-00-common/ui/editable-float.js"></script>
    <script src="../00-00-00-common/ui/spectrogram.js"></script>
    <script src="spectral-waterfall.js"></script>

    <script>
        if (isProduction()) { // TODO refactor this
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-76662342-1', 'auto');
            ga('send', 'pageview');
        }
    </script>

</body>
</html>
